<template>
  <div style="position: relative">
    <!-- <h1 class="title">服务端策略</h1> -->
    <div class="filter">
      <div style="display: flex; align-items: center;">
        <span style="">策略类型：</span>
        <el-select v-model="policyType" style="width: 220px">
        <el-option
          v-for="item in treeStore.treeStrategyTypeList"
          :key="item.name"
          :label="item.desc"
          :value="item.name"
        ></el-option>
      </el-select>
      </div>
      <el-button type="primary" @click="policyTypeChange">搜索</el-button>
    </div>
    <HETTable1
      ref="serverStrategyTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      :headerOperation="headerOperation"
      @getTableData="getServerStrategyList"
    >
      <template #operation>
        <el-table-column label="操作">
          <template #default="scope">
            <el-text class="cursor-pointer" type="primary" @click="delStrategy(scope.row.strategyId)">删除</el-text>
            <span class="mx-6">
              <el-text
                class="cursor-pointer"
                type="primary"
                @click="
                  data.dialogAsync = true;
                  strategyId = scope.row.strategyId;
                  treeStore.osType = scope.row.fromOs;
                  treeStore.osVersion = scope.row.osVersion;
                "
                >部署</el-text
              >
            </span>
            <el-text
              class="cursor-pointer"
              type="primary"
              @click="
                strategyType = scope.row.type;
                strategyId = scope.row.strategyId;
                detailDialog = true;
                treeStore.osType = scope.row.fromOs;
              "
              >详情</el-text
            >
          </template>
        </el-table-column>
      </template>
    </HETTable1>
    <el-dialog
      :model-value="data.dialogAsync"
      title="部署策略到组"
      width="30%"
      :center="true"
      :close-on-click-modal="false"
      @close="
        data.dialogAsync = false;
        groupFlag = false;
      "
      @open="groupFlag = true"
    >
      <div class="config-body">
        <Group
          v-if="groupFlag"
          :group="false"
          @chooseGroup="chooseGroup"
          :from-os="fromOs"
        ></Group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="deployConfirm()">确定</el-button>
          <el-button
            @click="
              data.dialogAsync = false;
              groupFlag = false;
            "
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <strategyDetail
      :dialogAsync="detailDialog"
      :strategyType="strategyType"
      :strategyId="strategyId"
      @closeDialog="detailDialog = false"
    ></strategyDetail>
    <UploadStrategy v-model="visible" :type="policyType"></UploadStrategy>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, markRaw } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTreeStore } from "~/utils/pinia/tree.js";
import {
  req_getServerStrategyList,
  req_getServerStrategyCount,
  req_delServerStrategy,
  req_deployStrategyToGroup,
  req_serverStrategyDetail,
} from "~/utils/axios/index.js";
import strategyDetail from "./strategyDetail.vue";
import UploadStrategy from "./UploadStrategy.vue";
const treeStore = useTreeStore();
// treeStore.openTree();
const serverStrategyTable = ref();
treeStore.treeLinkedTableRef = serverStrategyTable;
const policyType = ref("EXPORT_WHITELIST");
const groupFlag = ref(false);
const detailDialog = ref(false);
const strategyType = ref("");
onMounted(() => {});
// 删除
const delStrategy = (id) => {
  ElMessageBox.confirm("确定要删除该条策略？", "删除服务器策略", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
  }).then(() => {
    req_delServerStrategy(id).then((res) => {
      res.data.succeed ? ElMessage.success("删除成功") : ElMessage.success("删除失败");
      serverStrategyTable.value.getTableData();
    });
  });
};
const visible = ref(false);
const data = reactive({
  dialogAsync: false,
  tHead: [
    {
      label: "策略名称",
      prop: "strategyName",
      isCustom: false,
    },
    {
      label: "策略来源(设备名)",
      prop: "fromName",
      isCustom: false,
      // width: 200,
    },
    {
      label: "生效系统",
      prop: "osVersion",
      isCustom: false,
      // width: 230,
    },
    {
      label: "导入时间",
      prop: "createTime",
      isCustom: false,
      // width: 240,
    },
    {
      label: "修改人",
      prop: "updateUser",
      isCustom: false,
      // width: 200,
    },
    {
      label: "操作",
      prop: "operation",
      isCustom: true,
      slotName: "operation",
    },
  ],
  tableData: [],
  selectGroup: [],
  total: null,
});
const headerOperation = ref([
  {
    name: "上传策略",
    icon: "Upload",
    handleClick: () => {
      visible.value = true;
    },
  },
]);
// 选中的分组
const chooseGroup = (selectData) => {
  data.selectGroup = selectData;
};
const strategyId = ref();
const deployConfirm = () => {
  if (data.selectGroup.length < 1) {
    ElMessage.warning("未选择分组");
    return;
  }
  req_deployStrategyToGroup(strategyId.value, data.selectGroup).then((res) => {
    res.data.succeed ? ElMessage.success("部署成功") : ElMessage.success("部署失败");
    data.dialogAsync = false;
    groupFlag.value = false;
  });
};

// 获取表格数据
const getServerStrategyList = async (initTableParams, $filter) => {
  serverStrategyTable.value.loading();
  let params = {
    $skip: initTableParams.page * initTableParams.size,
    $limit: initTableParams.size,
  };
  try {
    const { data: res } = await req_getServerStrategyList({
      ...params,
      type: policyType.value,
    });
    const { data: count } = await req_getServerStrategyCount({ type: policyType.value });
    serverStrategyTable.value.finish();
    data.tableData = res || [];
    data.total = count || 0;
  } catch (err) {
    serverStrategyTable.value.finish();
  }
};

const policyTypeChange = () => {
  serverStrategyTable.value.initTablePage()
  serverStrategyTable.value.getTableData();
  if (policyType.value === "EXPORT_WHITELIST_ADD") {
    headerOperation.value[0]["disabled"] = true;
  } else {
    headerOperation.value[0]["disabled"] = false;
  }
};
</script>

<style lang="scss" scoped>
.func {
  position: absolute;
  top: 16px;
  left: 16px;
}
.filter {
  display: flex;
  justify-content: space-between;

  padding: 10px 24px;
  margin-bottom: 10px;
  background: #fff;
box-shadow: 2px 0px 6px 0px rgba(0,21,41,0.06);
border-radius: 6px;
}
</style>
